// let xmlHttp;
// if (window.XMLHttpRequest) {
//     //IE7+
//     xmlHttp = new XMLHttpRequest();
// } else {
//     //IE5,6
//     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
// }
new Vue({
    el: "#root",
    data: {
        //headBar
        visitor: true,
        user: {
            name: "小白"
        },
        //sortBar
        sortBy: "0",
        //articles
        article: {
            id: '',
            title: '',
            nickName: '',
            geoIp: '',
            text: '',
            insertTime: '',
            likeCount: '',
            dislikeCount: '',
            likeOrDislike: '',
            tagged: false,
        },
        //inputSection
        inputSection: false,
        ruleForm: {
            title: '这个是标题',
            nickName: '无名之辈',
            text: '乱七八糟写一些内容',
        },
        rules: {
            title: [
                {required: true, message: '起个标题吧', trigger: 'blur'},
                {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
            ],
            nickName: [
                {required: true, message: '阁下是?', trigger: 'blur'},
                {min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur'}
            ],
            text: [
                {required: true, message: '树洞需要有内容哦', trigger: 'blur'},
                {min: 5, max: 300, message: '长度在 5 到 300 个字符', trigger: 'blur'}
            ],
            phoneNumber: [
                {required: true, message: '请输入正确的中国地区手机号', trigger: 'blur'},
                {min: 11, max: 11, message: '请输入正确的中国地区手机号', trigger: 'blur'}
            ],
            password: [
                {required: true, message: '您的密码不符合规定', trigger: 'blur'},
                {min: 6, max: 6, message: '密码为六位字符(包含数字字母)', trigger: 'blur'}
            ],
        },
        //loginInAndRegister
        loginForm: {
            phoneNumber: '',
            password: '',
        },
        registerForm: {
            phoneNumber: '',
            password: '',
        },
    },
    methods: {
        //headBar
        handleSelect(key, keyPath) {
            displayModify(key);
        },
        //sortBar
        sortChange() {
            document.getElementById("articles").style.display = "";
            document.getElementById("emptyArticle").style.display = "none";
            axios({
                url: 'http://localhost:55550/article/getOne/' + this.sortBy,
                method: 'get',
            })
                .then(res => {
                    let newArticle = res.data.data;
                    if (newArticle == null) {
                        this.noArticle();
                    } else {
                        this.article = newArticle;
                    }
                });
        },
        //articles
        likeChange() {
            if (this.article.likeOrDislike === "like") {
                this.article.likeCount++;
            } else {
                this.article.dislikeCount++;
            }
            this.article.tagged = true;
        },
        noArticle() {
            document.getElementById("articles").style.display = "none";
            document.getElementById("emptyArticle").style.display = "";
        },
        //inputSection
        handleInputButton() {
            this.inputSection = true;
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                    axios({
                        url: 'http://localhost:55550/article',
                        method: 'post',
                        data: this.ruleForm,
                    })
                        .then(res => {
                            //成功
                            if (res.data.code === 200) {
                                //清除数据,关闭窗口
                                this.resetForm("ruleForm");
                                this.inputSection = false;
                                this.sortChange();
                            } else {
                                console.log(res.data);
                            }
                        });
                }
            );
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleInputClose(done) {
            this.$confirm('您的修改已经暂存, 确认关闭？')
                .then(_ => {
                    done();
                })
        },
        //loginInAndRegister
        newUser() {
            document.getElementById("registerBlock").style.display = "";
            document.getElementById("loginBlock").style.display = "none";
        },
        backLogin() {
            document.getElementById("registerBlock").style.display = "none";
            document.getElementById("loginBlock").style.display = "";
        },
        //init
        init() {
            axios({
                url: 'http://localhost:55550/article/getOne/0',
                method: 'get',
            })
                .then(res => {
                    let newArticle = res.data.data;
                    if (newArticle == null) {
                        this.noArticle();
                    } else {
                        this.article = newArticle;
                    }
                });
        }
    },
    created() {
        this.init();
    }
})

